<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>注意点</title>
</head>

<body>
    <!--
    几个注意点：
        1。关于组件名
            一个单词组成
                1。第一种写法：首字母小写   ：school
                2。第二种写法：首字母大写   ：School
            多个单词组成
                1。第一种写法：（kebab-case命名）   ：my-school
                1。第二种写法：（CameCcase命名）   ：MySchool (需要vue脚手架支持)
            备注：
                1。组件名尽可能回避html中已存在的元素名称 例如h2、H2等
                2。可以使用name配置指定组件（在开发者工具中呈现的名字）
        2。关于组件标签
            第一种写法： <school></school>
            第二种写法： <school/>
            备注：不用使用脚手架时  <school/>会导致后续组件不能渲染

        3。一个简写方法
            const school=Vue.extend（option）可以简写为 const school=option

-->
    <div id="root">
        <Hello></Hello>
        <school></school>

    </div>


    <script>
        // const school=Vue.extend({
        //   template:'<div> <h3>学校：{{school}}</h3>\n' +
        //           '        <h3>地址：{{dizhi}}</h3></div>>',
        //   data() {
        //    return { school:'超神学院' , dizhi:'扭曲丛林',}
        //
        //   }
        // })
        //注册组件-简写
        const school = {
            template: '<div> <h3>学校：{{school}}</h3>\n' +
                '        <h3>地址：{{dizhi}}</h3></div>>',
            data() {
                return {
                    school: '超神学院',
                    dizhi: '扭曲丛林',
                }

            }
        }
        new Vue({
            el: '#root',
            components: {
                school: school,
            }
        })
    </script>
</body>

</html>